<template>
  <a-card class="content" :bordered="false">
    <!-- <div class="table_caozuo">
      <template v-for="(item,index) in btn">
        <a-button :key="index" @click="handler(index)" v-if="item.isShow">{{item.title}}</a-button>
      </template>
      <span>{{ '已选择 '+number+' 项' }}</span>
      <a-button type="link" @click="clearSelection">清空</a-button>
    </div>-->
    <a-table
      rowKey="id"
      :columns="approvedColumns"
      :dataSource="loadData"
      :pagination="false"
      :loading="loading"
      :scroll="{ x: 1720 }"
    >
      <template slot-scope="text, record, index" slot="indexLabel">
        <span>{{ index + (page.current - 1) * page.size + 1 }}</span>
      </template>
      <el-image
        slot="img"
        slot-scope="goodsPic"
        style="width: 50px; height: 50px"
        :src="goodsPic"
        :preview-src-list="[goodsPic]"
      ></el-image>
      <!-- <a-switch
        slot-scope="text, record"
        slot="span"
        checked-children="下架"
        un-checked-children="上架"
        @change="(value) => switchChange(value, record)"
        :default-checked="record.shelfState == '01'"
        :disabled="record.goodsName == '无码商品'"
      /> -->
      <span slot="action" slot-scope="test, record">
        <template>
          <a-button type="link" @click="switchChange(record)" :disabled="record.goodsName == '无码商品' || (record.stockNum<=0 && record.shelfState != '01')">{{
            record.shelfState == '01' ? '下架' : '上架'
          }}</a-button>
          <a-button type="link" @click="edit(record)" :disabled="record.goodsName == '无码商品'">编辑</a-button>
          <a-button type="link" @click="del(record)" :disabled="record.goodsName == '无码商品'">删除</a-button>
        </template>
      </span>
    </a-table>
    <template>
      <div style="width: 100%; position: relative; height: 100px">
        <a-pagination
          show-quick-jumper
          show-size-changer
          v-model="page.current"
          :page-size-options="['10', '20', '30', '40', '50']"
          :total="page.total"
          :page-size.sync="page.size"
          @showSizeChange="onShowSizeChange"
          @change="onShowSizeChange"
          :show-total="(total) => `共 ${total} 条`"
          style="margin: 2% 0; position: absolute; right: 1%"
        />
      </div>
    </template>
  </a-card>
</template>

<script src='./approved.js'></script>

<style lang="less">
.content {
  & > .ant-card-body {
    padding: 0;
    padding-top: 8px;
  }
}
</style>